<template>
		<view class="page-title" 
		:style="{paddingTop: menuButtonInfo.top + 'px',
						 lineHeight: menuButtonInfo.height + 'px',
						 textAlign: align,
						 fontSize: fontSize + 'rpx',
						 backgroundColor: backGround,
						 }"
		:class="{sticky: isSticky}"				 
		>{{title}}</view>
</template>

<script>
	export default {
		name:"PageTitle",
		props:{
			title:{
				type: String,
				default: '首页'
			},
			align: {
				type: String,
				default: 'left'	// left ,center, right
			},
			fontSize: {
				type: [String, Number],
				default: '36'
			},
			backGround: {
				default: '#fff'
			},
			isSticky: {
				default: true
			}
		},
		data() {
			return {
				menuButtonInfo: null,
			};
		},
		created(){
			this.menuButtonInfo = this.menuButton;
		}
	}
</script>

<style lang="scss">
	.page-title{
		position: relative;
		z-index: 999;
		font-weight: bold;
		color: #000000;
		padding-left: 30rpx;
	}
	
	.sticky{
		position: sticky;
		top: 0;
	}
</style>